<template>
  <div id="body">
    <div id="search">
      <a-input-search
        v-model:value="value"
        enter-button="搜索"
        placeholder="请输入搜索的用户名"
        size="large"
        style="width: 500px"
        @search="onSearch"
      />
    </div>
    <div>
      <a-table :columns="columns" :data-source="data">
        <template #imgHead="{ text: imgHead }">
          <a-avatar :src="imgHead" />
        </template>
        <template #action="{ text }">
          <span>
            <a @click="gotoArticle(text.name)">管理文章</a>
            <a-divider type="vertical" />
            <a>查看用户</a>
            <a-divider type="vertical" />
            <a @click="deleleUser(text.key)">删除用户</a>
          </span>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
// import { DownOutlined } from "@ant-design/icons-vue";
import { findUser, deleteUser } from "../../api/administer";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";

const columns = [
  {
    title: "用户头像",
    dataIndex: "imgHead",
    key: "imgHead",
    slots: { customRender: "imgHead" },
  },
  { title: "用户昵称", dataIndex: "name", key: "name" },
  { title: "年龄", dataIndex: "age", key: "age" },
  { title: "性别", dataIndex: "sex", key: "sex" },
  { title: "关注", dataIndex: "follows", key: "follows" },
  { title: "粉丝", dataIndex: "fans", key: "fans" },
  { title: "文章数量", key: "articlesNum", dataIndex: "articlesNum" },
  { title: "动态数量", key: "dynamicsNum", dataIndex: "dynamicsNum" },
  { title: "管理", key: "action", slots: { customRender: "action" } },
];

export default defineComponent({
  setup() {
    const router = useRouter();
    const value = ref("");
    const data = ref([]);

    const gotoArticle = (name) => {
      // console.log(key);
      router.push({
        path: "/home/article",
        query: { name: name },
      });
    };

    const deleleUser = (key) => {
      // console.log(key);
      deleteUser({
        url: "/admin/deleteUser",
        uid: key,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const onSearch = (searchValue) => {
      // console.log(searchValue);
      findUser({
        url: "/admin/findUser",
        name: searchValue,
        success: (res) => {
          // console.log(res.data);
          data.value = res.data;
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    return {
      value,
      onSearch,
      data,
      columns,
      deleleUser,
      gotoArticle,
    };
  },

  components: {},
});
</script>

<style socped>
#body {
  margin-left: 20px;
  /* background: chartreuse; */
}
#search {
  text-align: center;
  margin: 20px 0 40px 0;
}
</style>